<template>
  <div class="app-container">
    <div class="OrderSummaryContainer">
      <Find :OriginalFilter="{ static: true }" :formList="formList" @findClicked="findClicked" />

      <div class="mt10">
        <el-card shadow="never" :body-style="{ padding: '10px 10px 0px' }">
          <div slot="header" class="f16">
            <span style="font-weight: 600">指令明细和生产进度</span>
          </div>
          <Table
            :tableHeader="tableHeader"
            :tableData="tableData"
            :TableHeight="50"
            :outTableHeight="140"
            class="mt10"
            @currentRow="currentRow"
            :summaryData="summaryData"
            summary
            :isLoading="isLoading"
          />
        </el-card>
        <el-card shadow="never" :body-style="{ padding: '10px' }">
          <div slot="header" class="f16">
            <span style="font-weight: 600">材料明细</span>
          </div>
          <Table :tableHeader="tableHeader2" :tableData="tableData2" :TableHeight="50" :outTableHeight="140" class="mt10" />
          <!-- 分页器 -->
          <PageModule :PageData="{ total }" @pageSizeChange="handleSizeChange" @pageChange="handleCurrentChange" />
        </el-card>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { computed, defineComponent, reactive, ref } from 'vue'
import type { formListType } from '@/components/Find/index.vue'
import service from '@/utils/request'
import { debounce } from 'lodash'
import { selectList } from '@/plugins/mixin'
import Api from '@/api/GeneralManager/inquire/OrderSummary'

import JMessage from '@/utils/JMessage'
export default defineComponent({
  name: 'ProductionDynamicQuery'
})
</script>
<script lang="ts" setup>
import { i18n, Jzhcn } from '@/i18n'
import { onMounted, watch } from 'vue'
const formList = ref([
  {
    type: 'input',
    inputPlaceholder: '请输入指令',
    inputValue: '',
    inputLabel: ''
  },
  {
    type: 'select',
    selectValue: '',
    selectP: '品牌',
    selectLabel: '',
    selectOptions: []
  },
  {
    type: 'select',
    selectValue: '',
    selectP: '货号',
    selectLabel: '',
    selectOptions: []
  },
  {
    type: 'select',
    selectValue: '',
    selectP: '季度',
    selectLabel: '',
    selectOptions: []
  },
  {
    type: 'select',
    selectValue: '',
    selectP: '样品类型',
    selectLabel: '',
    selectOptions: []
  },
  {
    type: 'date',
    dateLabel: '下单日期',
    dateValue: ''
  },
  {
    type: 'date',
    dateLabel: '指令交期',
    dateValue: ''
  },

  // {
  //   type: 'select',
  //   selectValue: '',
  //   selectP: '厂商',
  //   selectLabel: '',
  //   selectOptions: [],
  // }, {
  //   type: 'select',
  //   selectValue: '',
  //   selectP: '类型',
  //   selectLabel: '',
  //   selectOptions: [{
  //     optionKey: '1',
  //     optionValue: '111111',
  //     optionLabel: 'option1'
  //   },
  //   {
  //     optionKey: '2',
  //     optionValue: '222222',
  //     optionLabel: 'option2'
  //   }],
  // }, {
  //   type: 'input',
  //   inputPlaceholder: '请输入订购单号',
  //   inputValue: '',
  //   inputLabel: '',
  // }, {
  //   type: 'input',
  //   inputPlaceholder: '请输入材质',
  //   inputValue: '',
  //   inputLabel: '',
  // }, {
  //   type: 'input',
  //   inputPlaceholder: '请输入颜色',
  //   inputValue: '',
  //   inputLabel: '',
  // }, {
  //   type: 'date',
  //   dateLabel: '订购日期',
  //   dateValue: ''
  // }, {
  //   type: 'date',
  //   dateLabel: '需求日期',
  //   dateValue: ''
  // }, {
  //   type: 'select',
  //   selectValue: '',
  //   selectP: '采购员',
  //   selectLabel: '',
  //   selectOptions: [],
  // },
  {
    type: 'button',
    checkboxLabel: '置空',
    bgColor: '#1890FF'
  }
]) as any
// 表一模块
const tableData = ref([])
const imgList = ref([])
// 表格1数据
const tableHeader = ref([
  {
    fixed: true,
    label: '指令',
    prop: 'lotNo',
    width: 160
  },
  {
    fixed: true,
    label: '数量',
    prop: 'orderQty'
  },
  {
    fixed: true,
    label: '采购',
    prop: 'purStatus',
    width: 50
  },
  {
    fixed: true,
    type: 'img',
    label: '图片',
    prop: 'photoPath',
    srcList: imgList
  },
  {
    label: '入库',
    prop: 'inStatus',
    width: 50
  },
  {
    label: '生产',
    prop: 'prodStatus'
  },
  {
    label: '裁断欠数',
    prop: 'cutShort'
  },
  {
    label: '计划',
    prop: 'cutPlan'
  },
  {
    label: '实际',
    prop: 'cutAct'
  },
  {
    label: '配套欠数',
    prop: 'printShort'
  },
  {
    label: '计划',
    prop: 'printPlan'
  },
  {
    label: '实际',
    prop: 'printAct'
  },
  {
    label: '针车欠数',
    prop: 'stitchShort'
  },
  {
    label: '计划',
    prop: 'stitchPlan'
  },
  {
    label: '实际',
    prop: 'stitchAct'
  },
  {
    label: '大底欠数',
    prop: 'lastShort'
  },
  {
    label: '计划',
    prop: 'lastPlan'
  },
  {
    label: '实际',
    prop: 'lastAct'
  },
  {
    label: '成型欠数',
    prop: 'cut2Short'
  },
  {
    label: '计划',
    prop: 'cut2Plan'
  },
  {
    label: '实际',
    prop: 'cut2Act'
  }
])
// 总计
interface summaryDataType {
  index: number
  num: number | undefined
}
const summaryData = ref<summaryDataType[]>([
  {
    index: 1,
    num: 0
  }
])
// 分页器
const currentPage = ref(1)
const pageSize = ref(40)
const total = ref(0)
const handleSizeChange = (val: number) => {
  pageSize.value = val
  getTableList()
}
const handleCurrentChange = (val: number) => {
  currentPage.value = val
  getTableList()
}
const isLoading = ref(true)
// 获取表数据
const getTableList = debounce(async () => {
  isLoading.value = true
  let tableDataList = await service.post<any, any>('/prod/getPcProdDynamicList', {
    brand: formList.value.find((item: any) => item.selectP && Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '品牌')
      ?.selectValue,
    deliveryEndDate: formList.value.find(
      (item: any) => item.dateLabel && Jzhcn.Find[item.dateLabel.split('.')[1] as keyof typeof Jzhcn.Find] === '指令交期'
    )?.dateValue?.[1],
    deliveryStartDate: formList.value.find(
      (item: any) => item.dateLabel && Jzhcn.Find[item.dateLabel.split('.')[1] as keyof typeof Jzhcn.Find] === '指令交期'
    )?.dateValue?.[0],
    orderId: formList.value.find(
      (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入指令'
    )?.inputValue,
    orderEndDate: formList.value.find(
      (item: any) => item.dateLabel && Jzhcn.Find[item.dateLabel.split('.')[1] as keyof typeof Jzhcn.Find] === '下单日期'
    )?.dateValue?.[1],
    orderStartDate: formList.value.find(
      (item: any) => item.dateLabel && Jzhcn.Find[item.dateLabel.split('.')[1] as keyof typeof Jzhcn.Find] === '下单日期'
    )?.dateValue?.[0],
    pageNum: currentPage.value,
    pageSize: pageSize.value,
    sample: formList.value.find((item: any) => item.selectP && Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '样品类型')
      ?.selectValue,
    season: formList.value.find((item: any) => item.selectP && Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '季度')
      ?.selectValue,
    style: formList.value.find((item: any) => item.selectP && Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '货号')
      ?.selectValue
  })
  isLoading.value = false
  imgList.value = tableDataList.list.map((item: any) => {
    return item.photoPath
  })
  tableData.value = tableDataList.list
  total.value = tableDataList.total
  summaryData.value[0].num = tableDataList.qtyTotal
  currentRow()
}, 500)
onMounted(() => {
  getTableList()
})
watch(
  () =>
    formList.value.map((item: any) => {
      item.selectValue, item.inputValue, item.dateValue, item.checked
    }),
  () => {
    getTableList()
  }
)

const tableData2 = ref([])
const findClicked = (content: string) => {
  if (content === '置空') {
    formList.value.forEach((item: any) => {
      item.inputValue = ''
      item.selectValue = ''
      item.dateValue = ''
    })
  }
  getTableList()
}

// 获取下拉列表
const getSelectList = async () => {
  await selectList(formList, () => service.get<any, any>(`/prod/getPcProdDynamicCondition`))
  // let SelectList = await service.get<any, any>('/prod/getPcProdDynamicCondition')
  // SelectList.brands.forEach((item: any, index: number) => {
  //   if (item === null) return
  //   formList.value.find((item: any) => item.type === 'select' && Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '品牌').selectOptions.push({
  //     optionKey: index,
  //     optionValue: item,
  //     optionLabel: item
  //   })
  // })
  // SelectList.styles.forEach((item: any, index: number) => {
  //   if (item === null) return
  //   formList.value.find((item: any) => item.type === 'select' && Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '货号').selectOptions.push({
  //     optionKey: index,
  //     optionValue: item,
  //     optionLabel: item
  //   })
  // })
  // SelectList.seasons.forEach((item: any, index: number) => {
  //   if (item === null) return
  //   formList.value.find((item: any) => item.type === 'select' && Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '季度').selectOptions.push({
  //     optionKey: index,
  //     optionValue: item,
  //     optionLabel: item
  //   })
  // })
  // SelectList.samples.forEach((item: any, index: number) => {
  //   if (item === null) return
  //   formList.value.find((item: any) => item.type === 'select' && Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '样品类型').selectOptions.push({
  //     optionKey: index,
  //     optionValue: item,
  //     optionLabel: item
  //   })
  // })
}
onMounted(() => {
  getSelectList()
})

// 表格2数据
const tableHeader2 = ref([
  {
    label: '颜色',
    prop: 'mtlColor',
    width: 100
  },
  {
    label: '材质',
    prop: 'mtlName',
    width: 150
  },
  {
    label: '规格',
    prop: 'mtlSpec'
  },
  {
    label: '单位',
    prop: 'mtlUnit'
  },
  {
    label: '类型',
    prop: 'purType'
  },
  {
    label: '订购单号',
    prop: 'purNo'
  },
  {
    label: '需求日期',
    prop: 'pruDate'
  },
  {
    label: '订购日期',
    prop: 'reqDate'
  },
  {
    label: '厂商',
    prop: 'vendorName'
  },
  {
    label: '订购数量',
    prop: 'purQty'
  },
  {
    label: '入库数量',
    prop: 'inQty'
  },
  {
    label: '入库日期',
    prop: 'inDate'
  },
  {
    label: '采购员',
    prop: 'sysUser'
  },
  {
    label: '备注',
    prop: 'remark'
  }
])

// 点击表给另一张表传数据
const currentRow = async (row: any = tableData.value[0] ? tableData.value[0] : {}) => {
  let { lotNo }: any = row
  // 给表二传指令号
  let table2Data = await service.post<any, any>(`/prod/getProdDynamicDetail`, { lotNo })
  let dataList: any = table2Data.map((item: any) => {
    if (item.purQty !== null) {
      item.purQty = parseFloat(item.purQty).toFixed(2)
    }
    if (item.inQty !== null) {
      item.inQty = parseFloat(item.inQty).toFixed(2)
    }

    return item
  })
  tableData2.value = dataList
}
</script>

<style lang="less" scoped>
// 底部
.bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
  flex-wrap: wrap;

  .total {
    font-size: 14px;
    color: rgba(0, 0, 0, 0.6);
    font-family: PingFangSC-Regular-, PingFangSC-Regular;
  }

  :deep(.el-input__wrapper) {
    padding: 0;
  }

  :deep(.el-input__suffix) {
    transform: translateX(-9px);
  }

  :deep(.el-pagination .el-select .el-input) {
    width: 88px;
  }

  :deep(.number) {
    border: 1px solid #dcdcdc;
    margin-right: 8px;
    border-radius: 3px 3px 3px 3px;
  }

  :deep(.is-active.number) {
    background-color: #f89027 !important;
    color: white;
    border-radius: 3px 3px 3px 3px;
  }

  .save {
    color: black;
    border: 1px solid #e7e7e7;
    background: #e7e7e7;
  }
}
</style>
